import React, { Component, Fragment } from "react";
// antd
import { Button, Tag, Tooltip, Tabs } from "antd";
// table 组件
import TableComponent from "@c/tableData/Index";
import Action from "@c/buttonAction/Index";
import NodeModal from "./components/NodeModal";
import { Device_code } from "../../constants";
//
import TopologyCharts from "./charts/Topology";
// css
import "./index.scss";

const { TabPane } = Tabs;

class NodeList extends Component {
    constructor(props){
        super(props);
        this.state = {
            // id
            id: "",
            // 表头
            tableConfig: {
                url: "nodeList",
                method: "get",
                checkbox: true,
                thead: [
                    { 
                        title: "名称/IP", 
                        key: "ip",
                        render: (text, rowData) => {
                            return (
                                <div>
                                    <a href="/#">{rowData.ip}</a>
                                    <br></br>
                                    {rowData.name}
                                </div>
                            )
                        }
                    },
                    { 
                        title: "设备类型", 
                        key: "device_type",
                        render: (r) => {
                            let device_name = Device_code[r.device_type]
                            return ( //`img/${r.device_type}_1.png`
                                <Tooltip title={r.device_type}>
                                    {/* <img 
                                    src="http://ops-dev.raycloud.cn/vm_1.png" 
                                    alt={device_name} 
                                    style={{ width: '20px', height: '30px'}}>
                                    </img> */}
                                    <span>{device_name}</span>
                                </Tooltip>
                            )
                        }
                    },
                    { 
                        title: "坐标", 
                        key: "coord",
                        render: (text, rowData) => {
                            return (
                                <div>
                                    {rowData.longitude}_{rowData.latitude}
                                </div>
                            )
                        }
                    },
                    { title: "指向", dataIndex: "to", key: "to" },
                    { 
                        title: "状态", 
                        dataIndex: "status", 
                        key: "status",
                        render: (status, index) => {
                            let zt = status === 1 ? "正常" : "挂了";
                            let color = status === 1 ? 'blue' : 'red';
                            return (
                                <Tag color={color} key={index}>
                                    {zt}
                                </Tag>
                            )
                        }
                    },
                    { 
                        title: "管理", 
                        dataIndex: "manage", 
                        key: "manage", 
                        width: 215,
                        render: (text, rowData) => {
                            return (
                                <div className="inline-button">
                                    <Action>
                                        <Action.Button onClick={() => this.nodeModal({status: true, node_id: rowData.index_id})}>编辑</Action.Button>
                                        <Action.Button onClick={() => this.delete(rowData.index_id)}>删除</Action.Button>
                                    </Action>
                                </div>
                            )
                        }
                    }
                ],
                formItem: [
                    { 
                        type: "Input",
                        label: "IP", 
                        name: "ip", 
                        placeholder: "请输入IP"
                    }
                ]
            },
            // 表的数据
            data: []
        };
    }
    // 获取子组件实例
    getChildRef = (ref) => {
        this.tableComponent = ref; // 存储子组件
    }
    // 获取弹窗子组件实例
    getNodeModalRef = (ref) => { this.child = ref }
    // 显示弹窗
    nodeModal = (data) => {
        console.log(data)
        this.child.visibleModal(data);
    }
    /** 删除 */
    delete = (id) => {
        this.tableComponent.onHandlerDelete(id)
    }
    
    render(){
        return (
            <Fragment>
                <Tabs defaultActiveKey="1">
                <TabPane tab="网络拓扑图" key="1">
                    <TopologyCharts />
                </TabPane>
                    <TabPane tab="节点管理" key="2">
                        <TableComponent onRef={this.getChildRef} batchButton={true} config={this.state.tableConfig} >
                            <Button type="primary" ref="nodeAdd" onClick={() => this.nodeModal({ status: true })}>添加</Button>
                        </TableComponent>
                        <NodeModal onRef={this.getNodeModalRef} />
                    </TabPane>
                </Tabs>
            </Fragment>
        )
    }
}

export default NodeList